(function () {
    // 创建样式元素并添加到头部
    function createStyles() {
        var style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = `
            /* Layui 风格样式 */
            .upwd-layer-page { 
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0,0,0,.3);
                z-index: 9999;
            }
            .upwd-layer-content {
                position: relative;
                margin: 15% auto;
                padding: 20px;
                border-radius: 6px;
                background-color: #fff;
                box-shadow: 0 3px 8px rgba(0,0,0,.1);
                width: 420px;
                max-width: 90%;
            }
            .upwd-layer-title {
                font-size: 18px;
                line-height: 40px;
                padding-left: 15px;
                border-bottom: 1px solid #e2e2e2;
                margin-bottom: 15px;
            }
            .upwd-layer-close {
                position: absolute;
                top: 10px;
                right: 15px;
                font-size: 24px;
                cursor: pointer;
                color: #999;
            }
            .upwd-layer-close:hover {
                color: #333;
            }
            .upwd-form-item {
                margin-bottom: 15px;
                display: flex;
                 align-items: center;
            }
             .upwd-form-label {
                flex: 0 0 80px;
                white-space: nowrap; /* 防止标签文字换行 */
            }
            .upwd-input-block {
                 flex: 1;
                margin-left: 0;
            }
            .upwd-input {
                width: 100%;
                height: 38px;
                line-height: 38px;
                border: 1px solid #dcdcdc;
                border-radius: 4px;
                transition: all .3s;
            }
            .upwd-input:focus {
                border-color: #1E9FFF;
                box-shadow: 0 0 5px rgba(30,159,255,.2);
            }
            .upwd-btn {
                display: inline-block;
                height: 38px;
                line-height: 38px;
                padding: 0 18px;
                background-color: #1E9FFF;
                color: #fff;
                white-space: nowrap;
                text-align: center;
                font-size: 14px;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                transition: all .3s;
            }
            .upwd-btn:hover {
                opacity: 0.9;
            }
            .upwd-btn-primary {
                background-color: #fff;
                color: #777;
                border: 1px solid #dcdcdc;
            }
            .upwd-btn-primary:hover {
                border-color: #1E9FFF;
                color: #1E9FFF;
            }
            .upwd-layer-footer {
                text-align: right;
                margin-top: 20px;
            }
        `;
        document.head.appendChild(style);
    }

    // 创建模态框结构
    function createModalStructure() {
        var modal = document.createElement('div');
        modal.className = 'upwd-layer-page';

        modal.innerHTML = `
            <div class="upwd-layer-content">
                <div class="upwd-layer-title">修改密码</div>
                <span class="upwd-layer-close">&times;</span>
                <p>温馨提示：您的密码已过期，请修改密码！</p>
                <div id="accountInfo"></div>
                <form id="changePasswordForm">
                    <div class="upwd-form-item">
                        <label class="upwd-form-label">当前账号:</label>
                        <div class="upwd-input-block" id="accountInfoLabel"></div>
                    </div>
                    <div class="upwd-form-item">
                        <label class="upwd-form-label">原密码:</label>
                        <div class="upwd-input-block">
                            <input type="password" id="oldPassword" name="oldPassword" required class="upwd-input">
                        </div>
                    </div>
                    <div class="upwd-form-item">
                        <label class="upwd-form-label">新密码:</label>
                        <div class="upwd-input-block">
                            <input type="password" id="newPassword" name="newPassword" required class="upwd-input">
                        </div>
                    </div>
                    <div class="upwd-form-item">
                        <label class="upwd-form-label">确认密码:</label>
                        <div class="upwd-input-block">
                            <input type="password" id="confirmPassword" name="confirmPassword" required class="upwd-input">
                        </div>
                    </div>
                    <div class="upwd-layer-footer">
                        <button type="button" id="cancelBtn" class="upwd-btn upwd-btn-primary">取消</button>
                        <button type="submit" id="confirmBtn" class="upwd-btn">确定</button>
                    </div>
                </form>
            </div>
        `;

        document.body.appendChild(modal);

        return modal;
    }

    // 显示当前账号信息
    function setAccountInfo(modal) {
        var accountInfoDiv = modal.querySelector('#accountInfoLabel');
        accountInfoDiv.innerHTML = '<strong>' + getUsername() + '</strong>';
    }

    function getURLParams() {
        let href = window.location.href;
        const match = href.match(/#(.*?)\?/);
        if (match && match.length > 0) {
            href = href.replace(`${match[0].substring(0, match[0].length - 1)}`, '')
        }
        const ticketKey = 'ticket';
        // 创建一个新的URL对象
        const url = new URL(href);
        // 使用URLSearchParams获取参数
        const params = new URLSearchParams(url.search);
        console.log(params);
        return params;
    }

    function getUsername() {
        // 这里应该从实际环境中获取用户名，例如通过API或存储在session/localStorage中的数据
        return getURLParams().get('username') || 'admin'; // 示例用户名
    }

    // 添加事件监听器
    function addEventListeners(modal) {
        var span = modal.querySelector('.upwd-layer-close');
        var cancelBtn = modal.querySelector('#cancelBtn');
        var confirmBtn = modal.querySelector('#confirmBtn');
        var form = modal.querySelector('#changePasswordForm');

        // 当用户点击关闭（x）时关闭模态框
        span.onclick = closeModal.bind(null, modal);
        // 取消按钮点击事件处理函数
        cancelBtn.onclick = function () {
            console.log('请求退出登录...');
            closeModal(modal);
        };
        // 确定按钮点击事件处理函数
        form.onsubmit = function (event) {
            event.preventDefault(); // 阻止表单默认提交行为

            var oldPassword = modal.querySelector('#oldPassword').value;
            var newPassword = modal.querySelector('#newPassword').value;
            var confirmPassword = modal.querySelector('#confirmPassword').value;

            // 简单验证新旧密码是否相同，以及确认密码是否一致
            if (newPassword !== confirmPassword) {
                alert("新密码与确认密码不匹配！");
                return;
            }

            // 模拟请求修改密码接口
            console.log('请求修改密码...');
            console.log('Old Password:', oldPassword);
            console.log('New Password:', newPassword);

            // 成功后关闭模态框，并可选择刷新页面或重定向
            closeModal(modal);
            // window.location.reload(); // 可选：重新加载页面
        };

        // 当用户点击模态框外部时关闭它
        modal.onclick = function (event) {
            if (event.target === modal) {
                //  closeModal(modal);
            }
        };
    }

    // 关闭模态框
    function closeModal(modal) {
        modal.style.display = "none";
    }

    // 打开模态框
    function openModal(modal) {
        modal.style.display = "block";
    }

    // 检查URL参数中的sessionId
    function checkSessionId() {
        return getURLParams().get('sessionId') === 'landbest';  // 替换为实际需要匹配的值
    }

    // 监听键盘事件，用于快捷键调出模态框
    function listenForKeyboardShortcuts(modal) {
        function keydown(event) {
            // 检查是否按下了Ctrl+Shift+O组合键
            if (checkSessionId() && event.ctrlKey && event.shiftKey && event.key.toLowerCase() === 'o') {
                openModal(modal);
            }
        }

        try {
            document.removeEventListener('keydown', keydown);
        } catch (error) {
        }
        document.addEventListener('keydown', keydown);
    }

    // 初始化函数
    function init() {
        createStyles();
        var modal = createModalStructure();
        setAccountInfo(modal);
        addEventListeners(modal);
        // 监听快捷键以打开模态框
        listenForKeyboardShortcuts(modal);
    }

    // 导出初始化函数，以便外部调用
    window.showChangePasswordModal = init;
})();

// 调用 showChangePasswordModal 函数来显示模态框
window.showChangePasswordModal();